<template>
  <zk-topBg paddingTop="30" :showBack="true" title="借调审核"></zk-topBg>
  <view id="addAPborrow">
    <scroll-view
      :style="{
        padding:
          apborrowOtherStore.addOrdetailOrEdit === 'detail' ? 0 : ' 0 0 54px',
      }"
      scroll-y>
      <!-- 基本信息 -->
      <view id="baseInfo" class="card">
        <view class="title">
          <zk-titleLeft>基本信息</zk-titleLeft>
        </view>
        <view class="detail_box fs_14">
          <view class="msg_box">
            <view class="msg_item code flex">
              <view class="label color_text_gray">借调单号</view>
              <view class="info flex color_black">
                <view class="text_overflow">
                  {{ apborrowOtherStore.LoanCode }}
                </view>
                <image @tap="clickToCopy" src="@/static/img/other/copy-g.png" />
              </view>
            </view>
            <view class="msg_item type flex">
              <view class="label color_text_gray">借调类型</view>
              <view class="info flex color_black">
                <view>
                  {{
                    apborrowOtherStore.borrowOderDetail.BorrowType ==
                    "BorrowAllocation"
                      ? "调拨借调"
                      : "采购借调"
                  }}
                </view>
              </view>
            </view>
            <view class="msg_item dete flex">
              <view class="label color_text_gray">借调时间</view>
              <view class="info flex color_black">
                <view>
                  {{ apborrowOtherStore.borrowOderDetail.RegisterDate }}
                </view>
              </view>
            </view>
            <image
              v-if="
                apborrowOtherStore.borrowOderDetail.ReplyStatus == 'CheckFail'
              "
              class="approval_img"
              src="@/static/img/other/approval-nopassed.png" />
            <image
              v-if="
                apborrowOtherStore.borrowOderDetail.ReplyStatus == 'CheckNot'
              "
              class="approval_img"
              src="@/static/img/other/approval-pending.png" />
            <image
              v-if="
                apborrowOtherStore.borrowOderDetail.ReplyStatus == 'CheckPass'
              "
              class="approval_img"
              src="@/static/img/other/approval-passed.png" />
          </view>
          <view class="msg_item flex">
            <view class="label color_text_gray">备注信息</view>
            <view class="info flex color_black">
              <view>{{
                apborrowOtherStore.borrowOderDetail.BorrowRemarks
              }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 审批流程 修改或详情时显示 -->
      <view id="Approval_process" class="card">
        <view class="title">
          <zk-titleLeft>审批流程</zk-titleLeft>
        </view>
        <!-- form 表单 -->
        <view
          v-if="apborrowOtherStore.addOrdetailOrEdit === 'edit'"
          class="Approval_body form_box">
          <view class="form_item">
            <view class="label flex">
              <view>发起人</view>
            </view>
            <view class="input">
              {{ apborrowOtherStore.borrowOderDetail.OperatorName || "- -" }}
            </view>
          </view>
          <view class="form_item approve">
            <view class="label flex">
              <view>审批结果</view>
              <view class="color_red">*</view>
            </view>
            <view class="input check_box fs_14 flex">
              <view
                @tap="checkApprove('CheckPass')"
                class="check_btn"
                :class="{
                  active:
                    apborrowOtherStore.formData.ReplyStatus === 'CheckPass',
                }">
                同意
              </view>
              <view
                @tap="checkApprove('CheckFail')"
                class="check_btn"
                :class="{
                  active:
                    apborrowOtherStore.formData.ReplyStatus === 'CheckFail',
                }">
                不同意
              </view>
            </view>
          </view>
          <view class="form_item Remarks">
            <view class="label flex">
              <view>审批意见</view>
            </view>
            <view class="input">
              <uni-easyinput
                v-model="apborrowOtherStore.formData.ReplyMsg"
                placeholder="请输入内容"></uni-easyinput>
            </view>
          </view>
        </view>
        <!-- 详情时显示 -->
        <view v-else class="detail_box Approval_body">
          <view class="approval_box flex fs_14">
            <view class="approval_item flex">
              <view class="label color_text_gray">发起人</view>
              <view class="info color_black">
                {{ apborrowOtherStore.borrowOderDetail.OperatorName }}
              </view>
            </view>
            <view class="approval_item flex">
              <view class="label color_text_gray">审批人</view>
              <view class="info color_black">
                {{ apborrowOtherStore.borrowOderDetail.ReplyerName }}
              </view>
            </view>
            <view class="approval_item flex">
              <view class="label color_text_gray">审批结果</view>
              <view
                class="info"
                :class="[
                  apborrowOtherStore.borrowOderDetail.ReplyStatus == 'CheckPass'
                    ? 'color_green'
                    : apborrowOtherStore.borrowOderDetail.ReplyStatus ==
                      'CheckFail'
                    ? 'color_red'
                    : 'color_yellow',
                ]">
                {{
                  apborrowOtherStore.borrowOderDetail.ReplyStatus == "CheckPass"
                    ? "审批通过"
                    : apborrowOtherStore.borrowOderDetail.ReplyStatus ==
                      "CheckFail"
                    ? "审批不通过"
                    : "审批中"
                }}
              </view>
            </view>
          </view>
          <view
            v-if="apborrowOtherStore.addOrdetailOrEdit === 'detail'"
            class="approval_item fs_14 flex">
            <view class="label color_text_gray">审批意见</view>
            <view class="info color_black">
              {{ apborrowOtherStore.borrowOderDetail.ReplyMsg }}
            </view>
          </view>
        </view>
      </view>
      <!-- 物资信息  -->
      <view id="material_info" class="card">
        <view class="title">
          <zk-titleLeft>物资信息</zk-titleLeft>
          <view class="handle_box flex">
            <view class="searchBox">
              <input
                v-model="searchGoodsInfoParam"
                @confirm="searchGoodsInfoList"
                placeholder="请输入物资名称或编号"
                placeholder-class="input-placeholder" />
              <view @tap="searchGoodsInfoList" class="iconBut">
                <image
                  src="@/static/img/statistics/seachH.png"
                  class="tabIcon" />
              </view>
            </view>
          </view>
        </view>
        <view class="table_box">
          <!-- 头部 -->
          <view class="table_header">
            <view class="table_header_item">
              <!-- 表头 -->
              <view
                class="fs_15 color_text_gray"
                v-for="(item, index) in apborrowOtherStore.addtableHeader"
                :key="index">
                {{ item }}
              </view>
            </view>
          </view>
          <!-- 表格 -->
          <scroll-view
            style="height: 220px"
            @scrolltolower="BorrowOrderGoodsListScroll"
            scroll-y>
            <view
              class="table_body"
              v-if="apborrowOtherStore.addGoodsInfoList.addGoodsList">
              <view
                v-for="(item, index) in apborrowOtherStore.addGoodsInfoList
                  .addGoodsList"
                :key="index"
                class="table_body_item">
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsName }}
                  </view>
                </view>
                <!-- 批次 -->
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsBatch }}
                  </view>
                </view>
                <!-- 有效期 -->
                <view class="table_body_item_cell">
                  <view class="fs_14">
                    <view class="fs_14 text_overflow">
                      {{ item.ExpirationDate }}
                    </view>
                  </view>
                </view>
                <!-- 库位 -->
                <view class="table_body_item_cell">
                  <view class="fs_14">
                    <view class="fs_14 text_overflow">
                      {{ item.BorrowBoxName }}
                    </view>
                  </view>
                </view>
                <!-- 库存数量 -->
                <!-- <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.SpecsNumber }}
                  </view>
                </view> -->
                <!-- 借调数量 -->
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.GoodsNumber }}
                  </view>
                </view>
                <!-- 单位 -->
                <view class="table_body_item_cell text_overflow">
                  <view class="fs_14 text_overflow">
                    {{ item.Units }}
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </scroll-view>
  </view>
  <view
    v-if="apborrowOtherStore.addOrdetailOrEdit === 'edit'"
    class="bottom_box">
    <zk-btn
      class="save_btn"
      @tap="backPage"
      color="#08121E"
      backgroundColor="#EEEEEE">
      返回
    </zk-btn>
    <zk-btn @tap="submitData" class="submit_btn"> 提交</zk-btn>
  </view>
  <zk-tips></zk-tips>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { useAPborrowStore } from "@/stores/modules/ApprovalManagement/APborrow/APborrow";
import { useAPborrowOtherStore } from "@/stores/modules/ApprovalManagement/APborrow/APborrowOther";
const apborrowOtherStore = useAPborrowOtherStore();
const APborrowstore = useAPborrowStore();
// 页面加载时触发
onLoad(async (options: any) => {
  apborrowOtherStore.getGoodsTypeList(); // 获取物资类型列表
  if (options?.LoanCode) {
    if (options.Edit) {
      apborrowOtherStore.addOrdetailOrEdit = "edit";
    } else {
      apborrowOtherStore.addOrdetailOrEdit = "detail";
    }
    apborrowOtherStore.LoanCode = options.LoanCode;
    await apborrowOtherStore.getBorrowDetailData({
      LoanCode: options.LoanCode,
    }); // 获取借调单详情
    await apborrowOtherStore.getAddGoods({}); // 获取借调单物资列表
  }
  console.log(
    "addAPborrow onLoad",
    options,
    apborrowOtherStore.addOrdetailOrEdit
  );
});
// 审批
const checkApprove = (status: any) => {
  apborrowOtherStore.formData.ReplyStatus = status;
  if (status == "CheckPass") {
    apborrowOtherStore.formData.ReplyMsg = "审核通过";
  } else {
    apborrowOtherStore.formData.ReplyMsg = "审核不通过";
  }
};
// 提交数据
const submitData = async () => {
  await apborrowOtherStore.submitAudit({});
  setTimeout(() => {
    uni.navigateBack({
      delta: 1,
    });
  }, 1500);
};
// 返回上一页
const backPage = () => {
  uni.navigateBack({
    delta: 1,
  });
};
//点击复制
const clickToCopy = () => {
  uni.setClipboardData({
    data: apborrowOtherStore.LoanCode,
    success: () => {
      uni.showToast({
        title: "复制成功",
        duration: 1000,
        icon: "none",
        mask: true,
      });
    },
  });
};

//借调单物资列表搜索物资信息列表
const searchGoodsInfoParam = ref("");
const searchGoodsInfoList = async () => {
  await apborrowOtherStore.getAddGoods({
    searchParam: searchGoodsInfoParam.value,
  });
  pageNumBorrowOrder.value = 1;
};
//借调单物资列表滚动到底部
const pageNumBorrowOrder = ref(1);
const BorrowOrderGoodsListScroll = async () => {
  if (
    apborrowOtherStore.addGoodsInfoList.currPage <
    apborrowOtherStore.addGoodsInfoList.totalPage
  ) {
    pageNumBorrowOrder.value++;
    await apborrowOtherStore.getAddGoods({
      pageNum: pageNumBorrowOrder.value,
    });
  } else {
    uni.showToast({
      title: "没有更多数据了",
      duration: 1000,
      icon: "none",
      mask: true,
    });
  }
};
</script>

<style lang="scss" scoped>
#addAPborrow {
  position: relative;
  height: calc(552px - 64px);
  width: 98%;
  margin: auto;
  padding: 0 10px;
  z-index: 1;
  margin-top: 10px;
  padding: 10px;
  scroll-view {
    height: 100%;
    width: 100%;
  }
  .card {
    padding: 20px;
  }
  /********基本信息********/
  #baseInfo {
    position: relative;

    /********详情时msg */
    .detail_box {
      .msg_box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .msg_item {
          &.code {
            width: 45%;
            .label {
              white-space: nowrap;
              width: 100px;
            }
            .text_overflow {
              max-width: 60% !important;
            }
          }
          &.type {
            width: 20%;
          }
          &.dete {
            width: 25%;
          }
          .info {
            margin-left: 5px;
            image {
              width: 14px;
              height: 14px;
              margin-left: 5px;
            }
          }
        }
        .approval_img {
          width: 80px;
          height: 80px;
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
      .msg_item {
        margin: 10px 0;
      }
    }
  }
  /********审批流程*******/
  #Approval_process {
    margin: 18px 0;
    .form_box {
      margin: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .form_item {
        margin-right: 10px;
        &.Remarks {
          width: 330px;
        }
        &.approve {
          .check_btn {
            margin: 0 5px 0 0;
            border: 1px solid rgb(228, 228, 228);
            border-radius: 4px;
            width: 72px;
            height: 46px;
            line-height: 46px;
            color: #08121e;
            text-align: center;
            &.active {
              border-color: #32966f;
              color: #32966f;
            }
          }
        }
        .label {
          color: rgb(8, 18, 30);
          font-family: 思源黑体;
          font-size: 16px;
          margin-bottom: 15px;
        }
      }
    }
    .approval_box {
      margin: 10px 0;
      .approval_item {
        width: 33.33%;
      }
    }
    .approval_item {
      margin: 10px 0 10px;
      .label {
        margin-right: 10px;
      }
    }
  }
  /******物资信息*******/
  #material_info {
    margin: 18px 0;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .handle_box {
        .searchBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 240px;
          height: 40px;
          margin: 4px 0 8px;
          border-radius: 8px;
          padding: 9px 0 9px 12px;
          border: 1px solid rgb(228, 228, 228);
          background-color: #ffffff;
          margin: 0 10px;
          input {
            font-size: 14px;
          }

          .iconBut {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 38px;
            height: 38px;
            border-left: 1px solid rgb(228, 228, 228);

            image {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
    .table_box {
      padding: 16px 0 0 0;
      width: 100%;
      .table_header_item,
      .table_body_item {
        text-align: center;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 40px;
        align-items: center;
        padding: 10px;
      }
      .table_header_item {
        padding: 5px 10px !important;
        grid-template-rows: 30px;
      }
      .table_header_item {
        width: 100%;
        border-radius: 6px;
        background: #f2f3f4;
        .title {
          color: #adafb8;
          font-family: HarmonyOS Sans SC;
          font-size: 14px;
          text-align: center;
        }
      }
      .table_body {
        width: 100%;
        height: 100%;
        .table_body_item {
          border-bottom: 1px solid rgb(244, 244, 244);
        }
      }
    }
  }
}

/********* 底部按钮 *********/
.bottom_box {
  height: 72px;
  width: 100%;
  box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);
  background: rgb(255, 255, 255);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  & > view {
    margin: 0 10px;
    justify-content: center;
  }
  .save_btn {
    width: 100px;
  }
  .submit_btn {
    width: 400px;
  }
}
</style>
